<template>
  <div class="resume-page">
    <div class="resume-page-body">
      <div class="resume_body_container">
        <div class="resume_body_container_title first_bar">
          <div>简历</div>
          <div style="position: relative">
            <div class="resume-popover-tips-tag">
              <div class="resume_body_container_title_opera">
                <div
                  class="resume-btn resume-btn_Blue resume-btn_Normal resume-btn_Disabled resume_body_container_complete"
                >
                  保存并生成简历
                </div>
              </div>
            </div>
            <div
              class="resume-popover-tips-wrap"
              style="left: -70px; top: 29px; visibility: hidden"
            >
              <div class="resume-popover-tips-box" style="width: 144px">
                <div class="resume-popover-tips-label">
                  请完善个人信息及教育经历
                </div>
                <div
                  class="resume-popover-tips-arrow resume-popover-tips-arrow-bottom"
                  style="left: 137px"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <div class="resume_body_container_content">
          <div class="resume_left_column_container">
            <div class="resume_preview resume_preview_level_l3">
              <div class="resume_preview_common" id="resume_preview">
                <div class="resume_preview_baseinfo resume_preview_guide">
                  <!-- 信息 -->
                  <div class="resume_preview_baseinfo_detail">
                    <div
                      class="resume_preview_baseinfo_title"
                      data-ableinsert="ableInsert"
                    >
                      姓名
                    </div>
                    <div class="resume_preview_baseinfo_desc">
                      <!-- 性别 -->
                      <span>
                        男
                        <i class="compose_separator"></i>
                      </span>
                      <!-- 年龄 -->
                      <span>
                        <span>23岁</span>
                        <i class="compose_separator"></i>
                      </span>
                      <!-- 身份 -->
                      <span>
                        党员
                        <i class="compose_separator"></i>
                      </span>
                      <!-- 位置 -->
                      <span>
                        江西
                        <i class="compose_separator"></i>
                      </span>
                      <span>本科</span>
                    </div>
                    <div class="resume_preview_baseinfo_contact">
                      <span>mail.kk.com</span>
                      <span>332567980</span>
                    </div>
                  </div>
                  <!-- 照片 -->
                  <div class="resume_preview_baseinfo_avatar"></div>
                </div>
                <div class="resume_preview_applyIntent resume_preview_guide">
                  <div
                    class="resume_preview_applyIntent_title"
                    data-ableinsert="ableInsert"
                  >
                    <h3>求职意向</h3>
                    <i class="resume_preview_module_split"></i>
                  </div>

                  <div class="resume_preview_applyIntent_desc">
                    <span
                      class="resume_preview_applyIntent_desc_name"
                      data-ableinsert="ableInsert"
                    >
                      <span>求职岗位：</span>
                      前端开发工程师
                    </span>
                    <span
                      class="resume_preview_applyIntent_desc_name"
                      data-ableinsert="ableInsert"
                    >
                      <i class="compose_separator"></i>
                      <span>意向城市：</span>
                      江西 湖北
                    </span>
                    <span
                      class="resume_preview_applyIntent_desc_name"
                      data-ableinsert="ableInsert"
                    >
                      <i class="compose_separator"></i>
                      <span>期望薪资：</span>
                      11-13k
                    </span>
                    <span
                      class="resume_preview_applyIntent_desc_name"
                      data-ableinsert="ableInsert"
                    >
                      <i class="compose_separator"></i>
                      <span>到岗时间</span>
                      随时到岗
                    </span>
                  </div>
                </div>
                <div class="resume_preview_education resume_preview_guide">
                  <div
                    class="resume_preview_education_title"
                    data-ableinsert="ableInsert"
                  >
                    <h3>教育经历</h3>
                    <i class="resume_preview_module_split"></i>
                  </div>
                  <div class="resume_preview_education_desc">
                    <div
                      class="resume_preview_education_info"
                      data-ableinsert="ableInsert"
                    >
                      <span class="resume_preview_education_info_college">
                        东华理工大学 · 软件工程
                        <span class="resume_preview_education_info_grade"
                          >本科</span
                        >
                      </span>

                      <span class="resume_preview_education_info_date">
                        2021.9 - 2025.6
                      </span>
                    </div>
                    <div
                      class="resume_preview_education_detail_container"
                      data-ableinsert="ableInsert"
                    ></div>
                  </div>
                </div>
                <div class="resume_preview_work resume_preview_guide">
                  <div
                    class="resume_preview_work_title"
                    data-ableinsert="ableInsert"
                  >
                    <h3>工作经历</h3>
                    <i class="resume_preview_module_split"></i>
                  </div>
                  <div class="resume_preview_work_desc">
                    <div
                      class="resume_preview_work_info"
                      data-ableinsert="ableInsert"
                    >
                      <span class="resume_preview_work_info_company"
                        >志豪集团</span
                      >
                      <span class="resume_preview_work_info_department"
                        >链云研发部</span
                      >
                      <span class="resume_preview_work_info_position"
                        >前端开发实习生</span
                      >
                      <span class="resume_preview_work_info_date">
                        2025.2 - 2025.5
                      </span>
                    </div>
                    <div class="resume_preview_work_detail">
                      <h3 data-ableinsert="ableInsert">链云需求开发</h3>
                      <p>
                        <span data-ableinsert="ableInsert"
                          >负责开发客户要求的需求</span
                        >
                      </p>
                    </div>
                  </div>
                </div>
                <div class="resume_preview_project resume_preview_guide">
                  <div
                    class="resume_preview_project_title"
                    data-ableinsert="ableInsert"
                  >
                    <h3>项目经历</h3>
                    <i class="resume_preview_module_split"></i>
                  </div>
                  <div class="resume_preview_project_desc">
                    <!-- 项目经历 -->
                    <div
                      class="resume_preview_project_info"
                      data-ableinsert="ableInsert"
                    >
                      <span class="resume_preview_project_info_organize"
                        >--</span
                      >
                      <span class="resume_preview_project_info_name">--</span>
                      <span class="resume_preview_project_info_duty">--</span>
                      <span class="resume_preview_project_info_date"
                        >xxxx-xxxx</span
                      >
                    </div>
                    <div class="resume_preview_project_detail">
                      <h3 data-ableinsert="ableInsert">
                        引导释放邮箱空间，帮助贫困山区
                      </h3>
                      <p>
                        <span
                          >1、引导用户删除旧邮件，倡导资源节约和合理利用。将节约下来的运营成本投入公益项目</span
                        >
                      </p>
                    </div>
                  </div>
                </div>
                <!-- <div class="resume_preview_campus resume_preview_guide"></div>
                <div class="resume_preview_award resume_preview_guide"></div> -->
                <!-- 个人技能 -->
                <div class="resume_preview_skill resume_preview_guide">
                  <div
                    class="resume_preview_skill_title"
                    data-ableinsert="ableInsert"
                  >
                    <h3>个人技能</h3>
                    <i class="resume_preview_module_split"></i>
                  </div>
                  <div class="resume_preview_skill_desc">
                    <div class="resume_preview_skill_item">
                      <span class="resume_preview_skill_item_name">
                        <span data-ableinsert="ableInsert">
                          语言技能：英语CET4
                          办公技能：熟练使用vsCode、webStorm、Idea等IDA...
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="resume-profile"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {},
});
</script>

<style scoped>
.resume-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Helevetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
  position: relative;
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.resume-page-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.resume-page * {
  box-sizing: border-box;
  background-size: 100% 100%;
}

.resume_body_container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.resume_body_container_title.first_bar {
  position: relative !important;
  top: 0 !important;
}

.resume_body_container_title {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  min-height: 45px;
  padding: 0 20px;
  font-size: 15px;
  background: white;
  border-bottom: 1px solid #e6e8eb;
}

.resume_body_container_title.first_bar {
  position: relative !important;
  top: 0 !important;
}

.resume_body_container_title_opera {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
}

.resume-btn.resume-btn_Disabled {
  pointer-events: none;
  color: #959da6;
  border-color: #d4d7d9;
  cursor: default;
}

.resume-btn_Blue {
  background: var(--theme_primary);
  border: none;
  line-height: 26px;
  color: #fff;
}

.resume-btn {
  display: inline-block;
  min-width: 74px;
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 24px;
  cursor: pointer;
  text-align: center;
  color: #2e3033;
  border-radius: 2px;
  border: 1px solid #c8cacc;
  background-color: #fff;
  user-select: none;
  white-space: nowrap;
  transition: all 0.2s linear;
}

.resume_body_container_complete {
  padding: 0 25px 15px 25px !important;
}

.resume-popover-tips-wrap {
  position: absolute;
  z-index: 1500;
}

.resume-popover-tips-box {
  background-color: #2e3033;
  color: #d4d7d9;
  padding: 10px 15px;
  box-sizing: content-box;
  font-size: 12px;
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.resume-popover-tips-label {
  flex: auto;
  line-height: 16px;
}

.resume-popover-tips-arrow-bottom {
  border-top-width: 0;
  border-bottom-color: #d4d7d9;
  top: -5px;
}

.resume-popover-tips-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  margin-left: -5px;
}

.resume-popover-tips-arrow-bottom:after {
  border-bottom-color: #2e3033;
  top: -3px;
}

.resume-popover-tips-arrow:after {
  content: " ";
  margin-left: -4px;
  border: 4px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
}

.resume-page * ::before,
.resume-page * ::after {
  background-size: 100% 100%;
}

.resume-btn_Blue.resume-btn_Disabled {
  background-color: var(--theme_primary);
  opacity: 0.6;
  cursor: default;
  color: #fff;
}

.resume-popover-tips-wrap {
  position: absolute;
  z-index: 1500;
}

.resume-popover-tips-box {
  background-color: #2e3033;
  color: #d4d7d9;
  padding: 10px 15px;
  box-sizing: content-box;
  font-size: 12px;
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.resume-popover-tips-label {
  flex: auto;
  line-height: 16px;
}

.resume-popover-tips-arrow-bottom {
  border-top-width: 0;
  border-bottom-color: #d4d7d9;
  top: -5px;
}

.resume-popover-tips-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  margin-left: -5px;
}

.resume_body_container_content {
  flex-grow: 1;
  display: flex;
  min-width: 1080px;
  overflow: hidden;
}

.resume_left_column_container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  overflow: auto;
  background: #f5f6f7;
  border-right: 1px solid #e6e8eb;
  padding: 30px 0 80px 0;
}

.resume_preview {
  flex-shrink: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 700px;
  min-width: 700px;
  min-height: 990px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 7px;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_common {
  width: 700px;
  height: auto;
  padding: 30px 20px;
}

.resume_preview_level_l3 .resume_preview_baseinfo {
  padding: 10px 20px;
}

.resume_preview_guide {
  color: #959da6;
}

.resume_preview_baseinfo {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_baseinfo_detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.resume_preview_level_l3
  .resume_preview_baseinfo
  .resume_preview_baseinfo_title {
  font-size: 18px !important;
}

.resume_preview_guide .resume_preview_baseinfo_title {
  color: #959da6;
}

.resume_preview_baseinfo_title {
  margin: 0 30px 10px 0;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  word-break: break-all;
}

.resume_preview_level_l3
  .resume_preview_baseinfo
  .resume_preview_baseinfo_desc {
  margin-bottom: 0;
}

.resume_preview_guide .resume_preview_baseinfo_desc {
  color: #959da6;
}

.resume_preview_baseinfo_desc {
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_baseinfo_desc i {
  font-style: normal;
}

.resume-page * ::before,
.resume-page * ::after {
  background-size: 100% 100%;
}
.compose_separator:before {
  content: "|";
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.compose_separator {
  color: #c8cacc;
  font-size: 14px;
  height: 15px;
  line-height: 15px;
  margin-left: 12px;
  margin-right: 12px;
  overflow: hidden;
}

.resume_preview_level_l3
  .resume_preview_baseinfo
  .resume_preview_baseinfo_contact {
  margin-bottom: 0;
  margin-top: 10px;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_baseinfo_contact {
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_baseinfo_contact > span {
  margin-right: 15px;
}

.resume_preview_level_l3
  .resume_preview_baseinfo
  .resume_preview_baseinfo_avatar {
  width: 65px;
  height: 90px;
}

.resume_preview_applyIntent {
  padding-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_applyIntent_title {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  color: #2f5785;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
}

.resume_preview_applyIntent_title > h3 {
  font-weight: bold;
}

.resume-page dd,
.resume-page dl,
.resume-page fieldset,
.resume-page form,
.resume-page h1,
.resume-page h2,
.resume-page h3,
.resume-page h4,
.resume-page h5,
.resume-page h6,
.resume-page legend,
.resume-page p,
.resume-page pre {
  margin: 0;
}

.resume_preview_module_split {
  display: inline-block;
  flex: 1;
  width: 100%;
  height: 1px;
  margin-left: 28px;
  background: #bdd2ea;
  opacity: 0.7;
}

.resume_preview_applyIntent_desc {
  padding: 18px 20px;
  border-radius: 4px;
}

.resume_preview_level_l3 .resume_preview_education {
  padding-bottom: 0;
}

.resume_preview_education {
  padding-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_level_l3
  .resume_preview_education
  .resume_preview_education_title {
  margin-bottom: 10px;
}

.resume_preview_education_title {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  color: #2f5785;
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  letter-spacing: 0;
}

.resume_preview_education_title > h3 {
  font-weight: bold;
}

.resume_preview_level_l3
  .resume_preview_education
  .resume_preview_education_desc {
  padding: 10px 20px 10px 20px;
}

.resume_preview_education_desc {
  padding: 18px 20px;
  border-radius: 4px;
}

.resume_preview_level_l3
  .resume_preview_education
  .resume_preview_education_info {
  margin-bottom: 0;
}

.resume_preview_education_info {
  display: flex;
}

.resume_preview_guide .resume_preview_education_info_college {
  color: #959da6;
}

.resume_preview_education_info_college {
  display: inline-block;
  flex: 3;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_guide .resume_preview_education_info_grade {
  color: #b9c0c7;
}

.resume_preview_education_info_grade {
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_education_info_date {
  display: inline-block;
  flex: 1;
  min-width: 150px;
  color: #4a90e2;
  font-size: 14px;
  letter-spacing: 0;
  text-align: right;
}

.resume_preview_education_detail_container {
  display: flex;
  flex-direction: row;
}

.resume_preview_level_l3 .resume_preview_work {
  padding-bottom: 0;
}

.resume_preview_work {
  padding-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_title {
  margin-bottom: 10px;
}

.resume_preview_work_title {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  color: #2f5785;
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  letter-spacing: 0;
}

.resume_preview_work_title > h3 {
  font-weight: bold;
}

.resume_preview_module_split {
  display: inline-block;
  flex: 1;
  width: 100%;
  height: 1px;
  margin-left: 28px;
  background: #bdd2ea;
  opacity: 0.7;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_desc {
  padding: 10px 20px 10px 20px;
}

.resume_preview_work_desc {
  padding: 18px 20px;
  border-radius: 4px;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_info {
  margin-bottom: 0;
}

.resume_preview_guide .resume_preview_work_info {
  color: #959da6;
}

.resume_preview_work_info {
  display: flex;
  font-weight: bold;
}

.resume_preview_work_info_company {
  margin-right: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_work_info_department {
  margin-right: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_work_info_position {
  margin-right: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_work_info_date {
  display: inline-block;
  flex: 1;
  min-width: 150px;
  color: #4a90e2;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  text-align: right;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_detail > h3 {
  margin: 10px 0 10px 0;
}

.resume_preview_guide .resume_preview_work_detail > h3 {
  color: #959da6;
}

.resume_preview_work_detail > h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_detail > h3 {
  margin: 10px 0 10px 0;
}

.resume_preview_guide .resume_preview_work_detail > h3 {
  color: #959da6;
}

.resume_preview_work_detail > h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.resume_preview_level_l3 .resume_preview_work .resume_preview_work_detail > p {
  margin-bottom: 0;
}

.resume_preview_work_detail > p {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  word-break: break-all;
  white-space: pre-wrap;
}

.resume_preview_level_l3 .resume_preview_project {
  padding-bottom: 0;
}

.resume_preview_project {
  padding-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_level_l3 .resume_preview_project .resume_preview_project_title {
  margin-bottom: 10px;
}

.resume_preview_project_title {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  color: #2f5785;
  font-size: 14px;
  font-weight: bold;
  line-height: 21px;
  letter-spacing: 0;
}

.resume_preview_project_title > h3 {
  font-weight: bold;
}

.resume_preview_level_l3 .resume_preview_project .resume_preview_project_desc {
  padding: 10px 20px 10px 20px;
}

.resume_preview_project_desc {
  padding: 18px 20px;
  border-radius: 4px;
}

.resume_preview_level_l3 .resume_preview_project .resume_preview_project_info {
  margin-bottom: 0;
}

.resume_preview_guide .resume_preview_project_info {
  color: #959da6;
}

.resume_preview_project_info {
  display: flex;
  font-weight: bold;
}

.resume_preview_project_info_organize {
  margin-right: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_project_info_name {
  margin-right: 10px;
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_project_info_duty {
  font-size: 14px;
  letter-spacing: 0;
}

.resume_preview_project_info_date {
  display: inline-block;
  flex: 1;
  min-width: 150px;
  color: #4a90e2;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  text-align: right;
}

.resume_preview_level_l3
  .resume_preview_project
  .resume_preview_project_detail
  > h3 {
  margin: 10px 0 10px 0;
}

.resume_preview_project_detail > h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.resume_preview_level_l3
  .resume_preview_project
  .resume_preview_project_detail
  > p {
  margin-bottom: 0;
}

.resume_preview_project_detail > p {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  word-break: break-all;
  white-space: pre-wrap;
}

.resume_preview_level_l3
  .resume_preview_project
  .resume_preview_project_detail
  > h3 {
  margin: 10px 0 10px 0;
}

.resume_preview_project_detail > h3 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_level_l3
  .resume_preview_project
  .resume_preview_project_detail
  > p {
  margin-bottom: 0;
}

.resume_preview_project_detail > p {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  word-break: break-all;
  white-space: pre-wrap;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}
/* 个人技能 */
.resume_preview_level_l3 .resume_preview_skill {
  padding-bottom: 0;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_guide {
  color: #959da6;
}

.resume_preview_skill {
  flex: 1;
  padding-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.resume_preview_level_l3 .resume_preview_skill .resume_preview_skill_title {
  margin-bottom: 10px;
}

.resume_preview_skill .resume_preview_skill_title {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 5px;
  color: #2f5785;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_skill .resume_preview_skill_title > h3 {
  font-weight: bold;
}

.resume-page dd,
.resume-page dl,
.resume-page fieldset,
.resume-page form,
.resume-page h1,
.resume-page h2,
.resume-page h3,
.resume-page h4,
.resume-page h5,
.resume-page h6,
.resume-page legend,
.resume-page p,
.resume-page pre {
  margin: 0;
}

.resume_preview_level_l3 .resume_preview_skill .resume_preview_skill_desc {
  padding: 10px 20px 10px 20px;
}

.resume_preview_skill .resume_preview_skill_desc {
  padding: 18px 20px;
  word-break: break-all;
  border-radius: 4px;
}
.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_skill .resume_preview_skill_item {
  display: flex;
  max-width: 100%;
  word-break: keep-all;
}

.resume_preview_level_l3 div,
.resume_preview_level_l3 p,
.resume_preview_level_l3 h3,
.resume_preview_level_l3 span {
  font-size: 13px !important;
  word-break: break-all;
}

.resume_preview_guide .resume_preview_skill_item_name {
  color: #959da6;
}

.resume_preview_skill .resume_preview_skill_item_name {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
